<template>
	<view class="feedback-container">

		<!-- 反馈类型选择触发区域 -->
		<view class="section" @tap="showPicker = true">
			<view class="type-display">
				{{ selectedType || '请选择反馈类型' }}
				<view class="clear-btn" v-if="selectedType" @tap.stop="clearSelection">
					<uni-icons type="clear" size="16" color="#999"></uni-icons>
				</view>
				<uni-icons v-else type="arrowdown" size="16" color="#999"></uni-icons>
			</view>
		</view>

		<!-- 反馈内容输入 -->
		<view class="section">
			<textarea v-model="feedbackContent" placeholder="请详细描述您的问题或建议..." maxlength="500"
				class="feedback-textarea"></textarea>
			<view class="word-count">{{ feedbackContent.length }}/500</view>
		</view>

		<!-- 手机号输入 -->
		<view class="section">
			<view class="section-title">手机号码</view>
			<view class="section-desc">方便我们与你联系</view>
			<input v-model="phone" type="number" placeholder="请输入手机号码" class="phone-input" maxlength="11" />
		</view>

		<!-- 图片上传 -->
		<view class="section">
			<view class="section-title">上传图片</view>
			<view class="upload-area" @tap="chooseImage">
				<view v-if="picurls.length === 0" class="upload-placeholder">
					<uni-icons type="plusempty" size="32" color="#ccc"></uni-icons>
					<text>点击上传图片</text>
				</view>
				<view v-else class="image-preview">
					<image v-for="(item, index) in picurls" :key="index" :src="item" class="preview-image"
						mode="aspectFill"></image>
					<view class="add-more" @tap.stop="chooseImage">
						<uni-icons type="plusempty" size="24" color="#ccc"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部选择器 (默认隐藏) -->
		<view class="picker-mask" v-if="showPicker" @tap="showPicker = false">
			<view class="picker-container" @tap.stop>
				<view class="picker-header">
					<text @tap="showPicker = false">取消</text>
					<text @tap="confirmSelection">确定</text>
				</view>
				<picker-view :value="[pickerIndex]" class="picker-body" @change="pickerChange">
					<picker-view-column>
						<view class="picker-item" v-for="(item, index) in typeOptions" :key="index">
							{{ item }}
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="button-group">
			<button class="confirm-btn" @tap="handleSubmit">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		getAddFeedBack
	} from '@/config/api/user.js';
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['userInfo'])
		},
		data() {
			return {
				showPicker: false, // 控制选择器显示
				pickerIndex: 0, // 当前选中的索引
				selectedType: '', // 已选中的类型
				feedbackContent: '', // 反馈内容
				picurls: [], //图片
				phone: '', //手机号
				typeOptions: [ // 可选项
					'商品相关',
					'功能异常',
					'优化建议',
					'其他问题'
				]
			}
		},
		methods: {
			// 新增清除选择方法
			clearSelection() {
				this.selectedType = ''
				this.pickerIndex = 0
			},

			// 选择器变化事件
			pickerChange(e) {
				this.pickerIndex = e.detail.value[0]
			},

			// 确认选择
			confirmSelection() {
				this.selectedType = this.typeOptions[this.pickerIndex]
				this.showPicker = false
			},

			// 取消反馈
			handleCancel() {
				uni.navigateBack()
			},

			// 选择图片
			chooseImage() {
				uni.chooseImage({
					count: 3 - this.picurls.length, // 最多3张
					sizeType: ['compressed'], // 压缩图
					sourceType: ['album', 'camera'], // 相册和相机
					success: (res) => {
						this.picurls = [...this.picurls, ...res.tempFilePaths]
					}
				})
			},

			async handleSubmit() {
				if (!this.selectedType) {
					uni.showToast({
						title: '请选择反馈类型',
						icon: 'none'
					})
					return
				}

				if (!this.feedbackContent.trim()) {
					uni.showToast({
						title: '请填写反馈内容',
						icon: 'none'
					})
					return
				}

				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					})
					return
				}

				if (!/^1[3-9]\d{9}$/.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}

				try {
					const feedback = {
						feedType: this.selectedType,
						content: this.feedbackContent,
						mobile: this.phone, // 注意这里改为 phone 而不是 phoneNumber
						picurls: encodeURIComponent(JSON.stringify(this.picurls)),
						userId: this.userInfo.id,
						username: this.userInfo.nickname
					};
					const res = await getAddFeedBack(feedback)
					console.log('提交数据:', feedback)
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
				} catch (error) {
					console.error('接口异常:', error)
					this.$message.error(error.response?.data?.message || '提交失败')
				}
			},

			// // 提交反馈
			// handleSubmit() {
			//       // 表单验证
			//       if (!this.selectedType) {
			//         uni.showToast({ title: '请选择反馈类型', icon: 'none' })
			//         return
			//       }

			//       if (!this.feedbackContent.trim()) {
			//         uni.showToast({ title: '请填写反馈内容', icon: 'none' })
			//         return
			//       }

			//       if (!this.phone) {
			//         uni.showToast({ title: '请输入手机号码', icon: 'none' })
			//         return
			//       }

			//       if (!/^1[3-9]\d{9}$/.test(this.phone)) {
			//         uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
			//         return
			//       }

			//       setTimeout(() => {
			//         uni.navigateBack()
			//       }, 1500)
			//     }
		}
	}
</script>

<style>
	/* 手机号输入样式 */
	.phone-input {
		width: 100%;
		height: 48px;
		padding: 0 12px;
		border: 1px solid #eee;
		border-radius: 8px;
		font-size: 15px;
		box-sizing: border-box;
		margin-top: 8px;
	}

	.section-desc {
		font-size: 12px;
		color: #999;
		margin-bottom: 8px;
	}

	/* 图片上传区域 */
	.upload-area {
		width: 100%;
		min-height: 100px;
		border: 1px dashed #ddd;
		border-radius: 8px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 8px;
	}

	.upload-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #ccc;
		padding: 20px;
	}

	.upload-placeholder text {
		margin-top: 8px;
		font-size: 14px;
	}

	.image-preview {
		display: flex;
		flex-wrap: wrap;
		padding: 8px;
	}

	.preview-image {
		width: 80px;
		height: 80px;
		margin: 4px;
		border-radius: 4px;
	}

	.add-more {
		width: 80px;
		height: 80px;
		border: 1px dashed #ddd;
		border-radius: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 4px;
	}

	/* 新增清除按钮样式 */
	.clear-btn {
		width: 24px;
		height: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f0f0f0;
		border-radius: 50%;
	}

	.feedback-container {
		padding: 20px;
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.feedback-title {
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 20px;
		color: #333;
	}

	.section {
		background-color: #fff;
		border-radius: 12px;
		padding: 16px;
		margin-bottom: 16px;
	}

	.section-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 8px;
		color: #333;
	}

	.type-display {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 0;
		color: #666;
	}

	.feedback-textarea {
		width: 100%;
		height: 150px;
		padding: 12px;
		border: 1px solid #eee;
		border-radius: 8px;
		font-size: 14px;
		box-sizing: border-box;
	}

	.word-count {
		text-align: right;
		font-size: 12px;
		color: #999;
		margin-top: 4px;
	}

	/* 选择器样式 */
	.picker-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
		display: flex;
		align-items: flex-end;
	}

	.picker-container {
		width: 100%;
		background-color: #fff;
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;
	}

	.picker-header {
		display: flex;
		justify-content: space-between;
		padding: 12px 20px;
		border-bottom: 1px solid #eee;
	}

	.picker-header text {
		font-size: 16px;
	}

	.picker-header text:last-child {
		color: #07C160;
	}

	.picker-body {
		height: 300px;
	}

	.picker-item {
		line-height: 50px;
		text-align: center;
		font-size: 16px;
	}

	/* 按钮样式 */
	.button-group {
		display: flex;
		justify-content: space-between;
		margin-top: 24px;
	}

	.cancel-btn,
	.confirm-btn {
		width: 48%;
		height: 48px;
		line-height: 48px;
		border-radius: 24px;
		font-size: 16px;
	}

	.cancel-btn {
		background-color: #fff;
		color: #333;
		border: 1px solid #ddd;
	}

	.confirm-btn {
		background-color: #07C160;
		color: #fff;
	}
</style>